<!DOCTYPE html >
<html xmlns:th="http://www.thymeleaf.org"
	  xmlns:layout="http://www.thymeleaf.org/extras/dialect"
	  layout:decorate="admin/layout/layout"
>

<head>
	<title>授权资源列表</title>
</head>

<body class="scroll-container">
<div layout:fragment="content">
	<div class="wrapper page-wrapper scrollable">
		<div class="page-content">
			<div class="row">
				<div class="col-lg-12">
					<div class="plate">

						<div class="plate-head  d-flex justify-content-between">
							<div class="plate-title">授权资源列表</div>
							<div class="plate-tools">
								<a data-toggle="collapse" href="#advanced-filter" aria-expanded="false" aria-controls="advanced-filter">高级搜索</a>
							</div>
						</div>

						<div class="plate-body clearfix">
							<form class="form-inline form-filter">
								<div class="row m-0">
									<div class="input-group mb-2 mr-sm-2 mb-sm-0">

										<div class="input-group mb-2 mr-sm-2 mb-sm-0">
											<input type="text" name="resourceId" class="form-control" placeholder="授权资源编码">
											<select name="systemResource" class="form-control">
												<option value="" selected>请选择资源类型</option>
												<option value="true">系统授权资源</option>
												<option value="false">客户授权资源</option>
											</select>
										</div>
									</div>
									<div class="row m-0">
										<div data-type="datetime-picker" class="input-group mb-2 mr-sm-2 mb-sm-0">
											<input name="createTime_start" type="text" class="form-control" readonly="" data-pick-time="false" data-format="yyyy-MM-dd" placeholder="创建时间起始">
											<span class="input-group-addon"><i class="" data-time-icon="fa fa-clock-o" data-date-icon="fa fa-calendar"></i></span>
										</div>

										<div data-type="datetime-picker" class="input-group mb-2 mr-sm-2 mb-sm-0">
											<input name="createTime_endDate" type="text" class="form-control" readonly="" data-pick-time="false" data-format="yyyy-MM-dd" placeholder="创建时间截止">
											<span class="input-group-addon"><i class="" data-time-icon="fa fa-clock-o" data-date-icon="fa fa-calendar"></i></span>
										</div>

									</div>
								</div>

								<div id="advanced-filter" class="collapse w-100">
								</div>

								<div class="row m-0 mt-2 w-100">
									<input id="test" class="btn btn-primary mr-2" type="button" value="过滤">
									<input class="btn btn-secondary mr-2" type="reset" value="重置">
									<a data-toggle="collapse" href="#advanced-filter" aria-expanded="false" aria-controls="advanced-filter"
									   style="padding-top: 12px; text-decoration: underline;">高级过滤</a>
								</div>
							</form>

							<table id="dataTable" class="table responsive table-bordered table-hover" cellspacing="0" width="100%">
								<thead>
								<tr>
									<th class="all">
										<label class="custom-control custom-checkbox">
											<input id="check-all" type="checkbox" class="custom-control-input">
											<span class="custom-control-indicator"></span>
										</label>
									</th>
									<th>资源名称</th>
									<th>资源编码</th>
									<th>资源类型</th>
									<th>显示排序</th>
									<th class="all" data-priority="1">资源描述</th>
									<th>授权范围</th>
									<th>归属系统</th>
									<th class="min-tablet-l">创建时间</th>
									<th data-priority="1">操作</th>
								</tr>
								</thead>
								<tbody></tbody>
								<tfoot></tfoot>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript" src="../../../static/asset/js/base.min.js" th:src="@{/asset/js/base.min.js}"></script>
	<script type="text/javascript" src="../../../static/asset/js/form.min.js" th:src="@{/asset/js/form.min.js}"></script>
	<script type="text/javascript" src="../../../static/asset/js/datatables.min.js" th:src="@{/asset/js/datatables.min.js}"></script>
	<script type="text/javascript" src="../../../static/asset/js/common/dataTables.ext.js" th:src="@{/asset/js/common/dataTables.ext.js}"></script>
	<script type="text/javascript" src="../../../static/asset/js/app.js" th:src="@{/asset/js/app.js}"></script>

	<script>
		$(function () {

			/*<![CDATA[*/
			var creatorId = '[[${#authentication.principal.userIdInClient}]]';
			/*]]>*/

			var openVals;

			var editor = new $.fn.dataTable.Editor({
				ajax: './list/action',
				table: "#dataTable",
				idSrc: 'id',
				fields: [
					{name: 'id', type: 'hidden'},
					{name: 'creator.id', type: 'hidden'},
					{label: '资源名称:', name: 'name'},
					{
						label: '资源编码:',
						name: 'resourceId',
						fieldInfo: '<div style="color:orange">范围编码不可重复</div>'
					},
					{
						label: '资源类型:',
						name: 'systemResource',
						type: 'select2',
						select2Opt: {
							placeholder: '请选择',
							allowClear: true,
							multiple: false,
							ajax: {
								url: '../authresource/select2?prop=systemResource'
							}
						}
					},
					{
						label: '显示排序:',
						name: 'sort',
						attr: {
							type: 'number'
						},
						fieldInfo: '<div style="color:orange">前台页面倒序显示</div>'
					},
					{
						label: '归属系统:',
						name: 'clientSystem.id',
						type: 'select2',
						select2Opt: {
							placeholder: '-',
							allowClear: true,
							multiple: false,
							ajax: {
								url: function () {
									return '../client/select2';
								}
							}
						}
					},
					{
						label: '授权范围:',
						name: 'authScope.id',
						type: 'select2',
						select2Opt: {
							placeholder: '-',
							allowClear: true,
							multiple: false,
							ajax: {
								url: function () {
									return '../authscope/select2';
								}
							}
						}
					},
					{label: '资源描述:', name: 'description', type: 'textarea'}
				]
			}).on('initCreate', function (e, o, action) {
				//创建时隐藏字段。
				editor.field('creator.id').val(creatorId);
			}).on('initEdit', function (e, o, action) {
				//编辑时隐藏字段。
			}).on('open', function () {
				openVals = JSON.stringify(editor.get());
			}).on('preClose', function (e, o, action) {
				if (action !== 'remove' && openVals && openVals !== JSON.stringify(editor.get())) {
					return confirm('存在未保存的变更，确定关闭吗？');
				}
			}).on('submit', function () {

			}).on('preSubmit', function (e, o, action) {
				if (action === 'remove')
					return;

				validateFieldValue(this);

				if (!this.inError()) {
					openVals = null;
				} else if (!editor.error()) {
					editor.error("数据本地校验失败，请检查所有的输入项！");
				}
				// If any error was reported, cancel the submission so it can be corrected
				return !this.inError();
			});

			// Edit record
			$('#dataTable').on('click', 'a.editor_edit', function (e) {
				e.preventDefault();

				editor.edit($(this).closest('tr'), {
					title: '编辑记录',
					buttons: {
						label: '提交',
						className: 'btn-primary',
						fn: function () {
							editor.submit();
						}
					}
				});
			});

			// Delete a record
			$('#dataTable').on('click', 'a.editor_remove', function (e) {
				e.preventDefault();

				var row = $(this).closest('tr');
				editor.remove(row, {
					title: '删除记录',
					message: '确定删除该记录?',
					buttons: {
						label: '提交',
						className: 'btn-danger',
						fn: function () {
							editor.submit();
						}
					}
				});
			});

			var table = $('#dataTable').DataTable({
				//select: true,
				autoWidth: false,
				ajax: {
					"url": './list/data', // ajax source
					"type": 'post'
				},
				"buttons": [
					{text: '新增', className: 'btn btn-primary', extend: "create", editor: editor},
					{
						text: '刷新',
						className: 'btn btn-secondary btn-outline',
						action: function (e, dt, node, config) {
							dt.ajax.reload();
						}
					},
					{text: '列显控制', className: 'btn btn-secondary', extend: "colvis", editor: editor}
				],
				columns: [
					{
						data: "id",
						orderable: true,
						visible: true
					},
					{
						data: "name",
						searchable: true,
						orderable: true
					},
					{
						data: "resourceId",
						searchable: true,
						orderable: true
					},
					{
						data: "systemResource",
						searchable: true,
						visible: true,
						render: function (data, type, row, meta) {
							var result = '';
							switch (data) {
								case true:
									result = '系统授权范围';
									break;
								default:
									result = '客户授权范围';
									break;
							}
							return result;
						}
					},
					{
						data: "sort",
						searchable: true,
						visible: true
					},
					{
						data: "description",
						searchable: false,
						visible: true
					},
					{
						data: "authScope.scope",
						searchable: false,
						visible: true
					},
					{
						data: "clientSystem.name",
						searchable: false,
						visible: true
					},
					{
						data: "createTime",
						searchable: false,
						visible: false
					},
					{
						data: "id",
						searchable: false,
						orderable: false,
						visible: true
					}
				],
				order: [0, "desc"],
				columnDefs: [
					{
						targets: [0],
						render: function (data, type, row, meta) {
							return '<label class="custom-control custom-checkbox">'
								+ '	<input type="checkbox" class="custom-control-input">'
								+ '	<span class="custom-control-indicator"></span>' + data
								+ '</label>'
						}
					},
					{
						targets: [-1],
						render: function (data, type, row, meta) {
							var result = '<a href="javascript:;" class="editor_edit">编辑</a>';
							result += '&nbsp;|&nbsp;<a href="javascript:;" class="editor_remove">删除</a>';

							return result;
						}
					}
				]
			});

			function validateFieldValue(editor) {
				var map = {};
				map['name'] = "范围名称不能为空";
				map['scope'] = "范围编码不能为空";
				map['systemScope'] = "范围类型不能为空";
				map['sort'] = "显示排序不能为空";
				map['description'] = "范围描述不能为空";
				map['clientSystem.id'] = "归属系统不能为空";
				for (var key in map) {
					var input = editor.field(key);
					if (!input.isMultiValue()) {
						if (!input.val() && input.val() !== false) {
							input.error(map[key]);
							continue;
						}
					}
				}
			}

			table.ext.filter.form('.form-filter');
			table.ext.filter.submit('#test');
			table.ext.batchCheck('#check-all');

			/* $('#example').dataTable({
			 "footerCallback": function( tfoot, data, start, end, display ) {
			 var api = this.api();
			 $( api.column(5).footer() ).html(
			 api.column(5).data().reduce(function ( a, b ) {
			 return App.floatVal(a) + App.floatVal(b);
			 }, 0)
			 );
			 }
			 });*/
		})
	</script>

	<!--{{> body-footer}}-->

</div>
</body>
</html>